<!--
 * @Author: Liu
 * @Date: 2022-04-17 15:38:23
 * @LastEditTime: 2023-05-16 15:11:24
-->
<template>
  <div class="music_box" @click="handleSwitch">
    <img
      src="../../public/images/music-icon.png"
      alt=""
      class="music rotate"
      v-if="playIng"
    />
    <img src="../../public/images/music-icon.png" alt="" class="music" v-else />
    <audio
        src="./video/music.mp3"
        id="audio_music"
        ref="audio_music"
        loop="loop"
      ></audio>
  </div>
</template>

<script>

import { Howl } from "howler";
let bgplayer = new Howl({
  src:  new URL(`/video/music.mp3`, import.meta.url).href,
  preload: true,
  loop: true,
  volume: 0.3,
  // autoplay: true,
});

export default {
  data() {
    return {
      playIng: false,
      music: null,
      audio_music:null,
    };
  },
  mounted() {

    var playAudio = () => {
      console.log("触发")
      console.log(bgplayer.playing())
      let audio_music = this.$refs.audio_music
      this.audio_music = audio_music;
      audio_music.play()
      this.playIng = true
      document.body.removeEventListener("click", playAudio);
      document.body.removeEventListener("touchstart", playAudio);
      return
      this.playIng = true
      if(bgplayer.playing()) {
       
        return false
      }
      bgplayer.play();

        document.body.removeEventListener("click", playAudio);
      document.body.removeEventListener("touchstart", playAudio);
    };
    document.body.addEventListener("click", playAudio);
    document.body.addEventListener("touchstart", playAudio);
    //兼容微信
    document.addEventListener("WeixinJSBridgeReady", () => {
      setTimeout(() => {
        playAudio();
      }, 300);
    });
    //兼容易信
    document.addEventListener("YixinJSBridgeReady", playAudio);
  },
  methods: {
    handleSwitch() {
      if (this.playIng) {
        this.playIng = false;
        // bgplayer.pause();
        this.audio_music.pause()
      } else {
        this.playIng = true;
        // bgplayer.play();
        this.audio_music.play()
      }
    },
    stopMusic(){
      this.playIng = false;
      this.audio_music.pause()
    }

  },
  beforeDestroy(){
    console.log("yichu");
    this.audio_music.stop()
  },
  // beforeUnmount(){
  //   // bgplayer.stop()
  //    this.audio_music.stop()
  // }
};
</script>
<style  scoped>
.music_box {
  width: 53px;
  height: 53px;
  z-index: 999999999;
}
img {
  width: 53px;

}
.rotate {
  animation: identifier 1.8s infinite linear;
}
@keyframes identifier {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>